<template>
	<!-- 刷题报告 -->
	<view class="content">
		<nav-bar @cutClick="cutClick" title="陶老师刷题报告" leftType="4" :opacity="topOpacity" topbgColor="#E3EAFF"></nav-bar>
		<view class="page-title">核心数据看板</view>
		<view class="page-message">刷题正确率趋势</view>
		<view class="echarts-list">
			<view class="item base-item">
				<qiun-data-charts
				  type="line"
				  :chartData="chartData"
				  :opts="opts"
				  canvasId="lineChart"
				  style="display: block;width:100%;height:100%;"
				/>
			</view>
			<view class="item base-item">
				<qiun-data-charts
				  type="ring"
				  :chartData="chartData2"
				  :opts="opts2"
				  canvasId="lineChart2"
				  style="display: block;width:100%;height:100%;"
				/>
			</view>
		</view>
		<view v-if="reportData?.errCharaptarRanks?.length>0" class="knowledge-list base-item" :class="{'oepn': reportData?.errCharaptarRanks?.length>3}">
			<view class="title">易错多错知识点列表(top10)</view>
			<view class="table" :style="{ '--childer-number': reportData?.errCharaptarRanks?.length}" :class="{'open': tableOpen}">
				<view class="th">
					<view class="td">序号</view>
					<view class="td">章节名称</view>
					<view class="td">关联题目数</view>
					<view class="td">错误率</view>
				</view>
				<template v-for="(item,index) in reportData.errCharaptarRanks">
					<view v-if="item.errNum>0" class="tr" :key="index">
						<view class="td">{{index+1}}</view>
						<view class="td">{{item.name}}</view>
						<view class="td">{{item.errNum}}道</view>
						<view class="td">{{(item.errNum/item.num*100).toFixed(0)}}%</view>
					</view>
				</template>
			</view>
			<view v-if="reportData?.errCharaptarRanks?.length>3" class="more" :class="{'on': tableOpen}" @tap="tableOpen=!tableOpen">
				<view class="iconfont icon-fanhui"></view>
			</view>
		</view>
		<view class="score-con base-item">
			<view class="title">
				<view class="text">基于刷题数据模拟考试得分</view>
				<view>考试预测</view>
			</view>
			<view class="score">
				<view class="left">{{reportData.predictPoint}}分</view>
				<view class="right">
					<view class="gap">±10分</view>
					<view class="msg">刷题越多 准确率越高</view>
				</view>
			</view>
			<view class="hint">
				陶老师已陪伴您学习
				<view class="num">{{reportData.studyDay}}天</view>
				，共完成
				<view class="num">{{(workCount/subjectCount*100).toFixed((0))}}%</view>
				题目
			</view>
			<view class="passing-rate">
				通过率
				<view class="num">{{passRate?.integer}}{{passRate?.decimal}}%</view>
			</view>
			<view class="hint">
				排名第
				<view class="num">{{reportData.rank}}名</view>
				，超过
				<view class="num">{{reportData.realRankRate}}%</view>
				人，{{getProposal()}}
			</view>
		</view>
	</view>
</template>

<script>
	import pageScrollMixin  from "@/mixins/pageScrollMixin.js"
	import {practiceReport} from '@/api/index.js'
	export default {
		mixins: [pageScrollMixin],
		data() {
			return {
				tableOpen: false,
				reportData: {},
				subjectCount: '',
				workCount: '',
				chartData: {},
				chartData2: {},
				opts: {
					legend: {
					    show: false   // 这里隐藏图例
					},
					padding: [10, 10, 0, 0],
					xAxis: {
					    disableGrid: false,
					    labelCount: 4,   // 只显示 4 个刻度
					},
					yAxis: {
					    min: 0,
					    max: 100,
					    splitNumber: 3
					},
					extra: {
						line: {
							type: 'curve',
						}
					}
				},
				opts2: {
					color: ['#90b7fe', '#f95959', '#feba5e', '#5c8af9'],
					legend: {
						show: true,
						position: "right",
						fontSize: 8,
						lineHeight: 13,
					},
					title: {
					  name: '平均120',
					  fontSize: 10,
					  color: '#444',
					  position: 'left',
					},
					subtitle: {
					  name: '道题用时',
					  fontSize: 10,
					  color: '#444',
					},
					dataLabel: false,    // 显示百分比
					extra: {
						ring: {
							ringWidth: 20,
							labelShow: true, // 开启标签
							centerColor: '#FFFFFF',
							customRadius: 42,
							minAngle: 10,
							offsetAngle: 0,        // 起始角度（可选）
						}
					},
					width: uni.upx2px(750),
				    height: uni.upx2px(400),
					padding: [0,0,0,0]// 紧凑
				},
				passRate: {},
			}
		},
		onLoad(options) {
			console.log(options,'----135')
			this.subjectCount=options.subjectCount;
			this.workCount=options.workCount;
			this.passRate=JSON.parse(options.passRate);
		},
		onReady(){
			this.practiceReport()
		},
		computed: {
			getKeMuId() {
				return this.$store.getters.getKeMuId;
			},
			getKeMuParams() {
				return this.$store.getters.getKeMuParams;
			},
		},
		methods: {
			getProposal(){
				const rate=this.reportData.realRankRate;
				if(rate<60){
					return '建议使用‘每日提升’和‘错题攻克’，一边练习一边攻克'
				}else if(rate>=80){
					return '建议坚持‘每日提升’和适当‘模拟考试’'
				}else{
					return '建议集中攻克高频错题，巩固易错易混考点'
				}
			},
			cutClick(){
				
			},
			practiceReport(){
				practiceReport(this.getKeMuParams).then(res=>{
					this.reportData=res.data;
					this.chartInit1();
					this.chartInit2();
					console.log(res,'---119')
				})
			},
			chartInit1(canvas, width, height, dpr){
				if(!(this.reportData?.paperHistories?.length>0))return;
				const hiData=this.reportData.paperHistories.map((item,i)=>{
					return {
						value: (item.right/item.num*100).toFixed(0),
						labelText: '22',
						labelShow: i==2
					}
				});
				const caData=hiData.map((v,index)=>{
					return index+1+'天'
				})
				// 构造标记点 series
				const maxV=hiData.map(item=>item.value);
				const maxValue = Math.max(...maxV)
				const maxIndex = hiData.findIndex(item=>item.value==maxValue);
				const markData = hiData.map((v, i) => {
				  if (i === maxIndex) {
				    return v  // ✅ 最大值点显示数值
				  }
				  return null  // 其他点不要
				})
				console.log(markData,'----206')
				console.log(hiData,'----119')
				this.$nextTick(() => {
					this.chartData = {
						categories: caData,
						series: [
							{ name: "1", data: hiData, dataLabel: false },
							{ 
								name: "最大值标记", 
								type: "line",      // 只画一个点
								data: markData,
								color: '#ff0000',// 最大值点颜色
								dataLabel: true
							},
						]
					}
				})
				return
					this.opts={
					  tooltip: {},
					  xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['1天', '10天', '20天', '30天'],
						splitLine: {
							show: true
						},
						axisLabel: {
							interval: 0,// 强制显示所有标签
							overflow: 'break', // 文字超出时换行
							color: '#9E9E9E',
							fontSize: 8
						},
						axisLine: {
							lineStyle: {
							  color: '#9E9E9E', // 轴线颜色（红色）
							  width: 2,        // 轴线宽度（可选）
							  type: 'solid'    // 线类型（可选，如 'dashed' 虚线）
							}
						}
					  },
					  yAxis: {
						  type: 'value',
						  splitLine: {
							  show: false
						  },
						  axisLabel: {
							color: '#BDBDBD',
							fontSize: 9
						  }
					  },
					  grid: {
						  top: 30,
						  left: 30,
						  right: 30,
						  bottom: 30
					  },
					  series: [
						{
						  symbol: 'none',
						  data: hiData,
						  type: 'line',
						  smooth: true,
						  areaStyle: {
							  opacity: 1,
							  color: new echarts.graphic.LinearGradient(0,0,0,1, [
								{
								  offset: 0,
								  color: '#88a7ed'
								},
								{
								  offset: 1,
								  color: '#fff'
								}
							  ])
						  },
						  markPoint: {
								symbol: 'roundRect', // 自定义箭头路径
								  symbolSize: 15,                      // 箭头大小
								  symbolOffset: [5, -15],              // 向上偏移30px
								  label: {
									show: true,
									formatter: '{c}%', // 显示数据值
									color: '#fff', // 文字颜色
									fontSize: 8,
								  },
								  itemStyle: {
									color: '#5A89FB' // 标记点颜色
								  },
								  data: [
									{
									  type: 'max', // 自动标记最大值
									  name: '最高值'
									}
								  ]
							},
						}
					  ]
					};
			},
			chartInit2() {
				if(!(this.reportData?.practiceTimeStats?.length>0))return;
			  const timeS=this.reportData?.practiceTimeStats?.[0];
			  this.$nextTick(() => {
			  	this.chartData2 = {
			  		series: [
						{
						    data: [
								{ value: timeS?.timeLt80, name: '80分钟内'},
								{ value: timeS?.timeGt120, name: '120分钟以上'},
								{ value: timeS?.timeGt100, name: '100分钟以上'},
								{ value: timeS?.timeLt100, name: '100分钟内'},
						    ]
						}
			  		]
			  	}
			  })
			  return
			  console.log(timeS,'===101')
			  const option = {
			    title: {
			      text: '刷题用时',
			      left: '3%',
				  top: '3%',
			      textStyle: { fontSize: 14, color: '#444' }
			    },
			    color: ['#90b7fe', '#f95959', '#feba5e', '#5c8af9'],
			    tooltip: { trigger: 'item' },
			    series: [{
			      type: 'pie',
			      radius: ['30%', '55%'], // 确保是环形（内半径40%，外半径65%）
			      center: ['50%', '55%'],  // 圆心居中（原60%可能偏移过多）
			      data: [
			        { value: timeS?.timeLt80, name: '80分钟内', itemStyle: { color: '#90b7fe' }, label: { color: '#90b7fe' }},
			        { value: timeS?.timeGt120, name: '120分钟以上', itemStyle: { color: '#f95959' }, label: { color: '#f95959' }},
			        { value: timeS?.timeGt100, name: '100分钟以上', itemStyle: { color: '#feba5e' }, label: { color: '#feba5e' }},
			        { value: timeS?.timeLt100, name: '100分钟内', itemStyle: { color: '#5c8af9' }, label: { color: '#5c8af9' }},
			      ],
			      labelLine: { 
			        show: true,
			        length: 3,
			        length2: 3,
			        smooth: 0.2
			      },
			      label: {
			        show: true,
			        fontSize: 8,
			        color: params => params.color
			      }
			    }],
			    // 修正点：graphic 应该直接挂在 option 下（非series内）
			    graphic: {
			      type: 'text',
			      left: 'center',
			      top: '53%',
			      style: {
			        text: '平均120\n道题用时',
			        fill: '#444',
			        fontSize: 8,
			        fontWeight: 'bold',
			        textAlign: 'center',
			        lineHeight: 12 // 增加行高避免文字重叠
			      }
			    }
			  };
			  myChart.setOption(option);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		min-height: 100vh;
		padding: 26rpx 28rpx 78rpx;
		background: linear-gradient( 180deg, #E3EAFF 0%, #F2F5FA 22%, #F3F3F3 53%, #F3F3F3 100%);
	}
	.page-title,.page-message{
		margin-bottom: 22rpx;
	}
	.page-title{
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}
	.page-message{
		font-size: 28rpx;
		color: #737373;
	}
	.base-item{
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		background-color: #fff;
	}
	.chart{
		height: 100%;
	}
	.echarts-list{
		display: flex;
		.item{
			flex: 1;
			height: 346rpx;
			overflow: hidden;
			&:first-child{
				margin-right: 20rpx;
			}
		}
	}
	.knowledge-list{
		padding: 22rpx 18rpx 18rpx;
		&.open{
			padding: 22rpx 18rpx 0;
		}
		.title{
			padding-left: 4rpx;
			margin-bottom: 22rpx;
			font-size: 28rpx;
			font-weight: 600;
			color: #444;
		}
		.table{
			height: calc(67rpx * 4);;
			overflow: hidden;
			text-align: center;
			border-top: 2rpx solid #F3F3F3;
			border-left: 2rpx solid #F3F3F3;
			transition: height .3s ease;
			&.open{
				height: calc(var(--childer-number) * 67rpx + 67rpx);
			}
		}
		.th,.tr{
			display: flex;
		}
		.th{
			background-color: #FCFCFF;
		}
		.tr{
			.td{
				&:nth-child(4){
					color: #FEBA5E;
				}
			}
		}
		.td{
			flex-shrink: 0;
			height: 66rpx;
			padding: 0 8rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			line-height: 66rpx;
			font-size: 24rpx;
			border-right: 2rpx solid #F3F3F3;
			border-bottom: 2rpx solid #F3F3F3;
			&:nth-child(1){
				width: 86rpx;
			}
			&:nth-child(2){
				flex: 1;
			}
			&:nth-child(3){
				width: 174rpx;
			}
			&:nth-child(4){
				width: 132rpx;
			}
		}
		.more{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 46rpx;
			.iconfont{
				font-size: 28rpx;
				transform: rotate(-90deg);
				color: #D1D1D1;
			}
			&.on{
				.iconfont{
					transform: rotate(90deg);
				}
			}
		}
	}
	.score-con{
		padding: 24rpx 26rpx 46rpx 22rpx;
		.title{
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			color: #9B9B9B;
			.text{
				font-weight: 600;
				color: #444;
			}
		}
		.score .left,.score .gap,.passing-rate{
			color: #D93A3A;
			font-weight: 600;
		}
		.score{
			display: flex;
			align-items: center;
			margin-bottom: 2rpx;
			.left,.gap{
				color: #D93A3A;
				font-weight: 600;
			}
			.left{
				margin-right: 14rpx;
				font-size: 108rpx;
			}
			.gap{
				margin-bottom: 12rpx;
				font-size: 44rpx;
			}
			.msg{
				font-size: 24rpx;
				color: #BDBDBD;
			}
		}
		.hint{
			font-size: 24rpx;
			color: #9B9B9B;
			.num{
				display: inline-block;
				color: #FEBA5E;
			}
		}
		.passing-rate{
			display: flex;
			align-items: baseline;
			font-size: 56rpx;
			.num{
				margin-left: 14rpx;
				font-size: 108rpx;
			}
		}
	}
	.charts-box {
	    width: 100%;
	    height: 300px;
	  }
</style>
